<template>
    <!--作业列表-->
    <div class="list">
       <div class="elist">
           <el-table :data="filteredHomeworkList" style="width: 100%; padding: 15px;" :row-class-name="tableRowClassName">
               <el-table-column
                   prop="homeworkName"
                   label="作业名称"
                   width="180"
                   >
                   <template slot-scope="scope">
                       <i class="iconfont icon-wenjian-wendangtubiao"></i>
                       <span style="margin-left: 10px">{{ scope.row.homeworkName}}</span>
                   </template>
               </el-table-column>
               <el-table-column
                   prop="start"
                   label="开始时间"
                   width="200">
               </el-table-column>
               <el-table-column
                   prop="end"
                   label="截止时间"
                   width="300">
               </el-table-column>
               <el-table-column
                   prop="state"
                   label="作业状态"
                   width="200">
               </el-table-column>
               <el-table-column
                   prop="option"
                   label="操作">
                   <template slot-scope="scope">
                   
                       <el-button
                           size="mini"
                           @click="handleView(scope.row)">查看</el-button>
                       <el-button
                           size="mini"
                           @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                   </template> 
               </el-table-column>
           </el-table>
       </div>
        <!-- 新分页样式 -->
       <div class="pagination-wrapper">
           <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-sizes="[8, 12, 16, 20]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="totalCount">
           </el-pagination>
       </div>
   </div>
  </template>
  
  <script>
  import { RouterLink } from 'vue-router';
  import axios from 'axios';
  export default {
    props: {
        courseclassS: {
            type: String,
            required: false,
            default: ''
        },
        highlightedRows: {
            type: Set,
            required: false,
            default: () => new Set()
        }
    },
    data() {
        return {
            allHomeworkList: [],
            loading: false,
            currentPage: 1,
            pageSize: 8
        }
    },
    computed: {
        filteredHomeworkList() {
            if (!this.allHomeworkList) return [];
            return (this.allHomeworkList || [])
                .filter(homework => 
                    homework.courseclass === this.courseclassS && 
                    homework.state === '已截至'
                )
                .sort((a, b) => {
                    if (!a.start || !b.start) return 0;
                    return new Date(a.start) - new Date(b.start);
                });
        },
        totalCount() {
            return this.filteredHomeworkList.length;
        }
    },
    watch: {
        courseclassS: {
            handler(newVal) {
                console.log('课程名称变化:', newVal);
                if (newVal) {
                    this.getHomeworkList();
                }
            },
            immediate: true
        }
    },
    methods: {
        async getHomeworkList() {
            try {
                this.loading = true;
                console.log('正在获取作业列表，课程名称:', this.courseclassS);
                
                const response = await axios.get('http://localhost:9999/homework/getHomeworkState', {
                    params: {
                        state: '已截至'
                    }
                });
                
                console.log('接口返回的原始数据:', response.data);
                this.allHomeworkList = response.data;
                
                // 打印筛选后的数据
                console.log('筛选后的作业列表:', this.filteredHomeworkList);
                
            } catch (error) {
                console.error('获取作业列表失败:', error);
                this.$message.error('获取作业列表失败');
            } finally {
                this.loading = false;
            }
        },
        handleView(row) {
            if (!row || !row.homeworkId) {
                this.$message.error('作业信息不完整');
                return;
            }
            console.log('查看作业:', row);
            this.$router.push({
                path: '/layout/shlist',
                query: {
                    homeworkId: row.homeworkId
                }
            }); 
        },
        handleEdit(index, row) {    
            if (!row || !row.homeworkId) {
                this.$message.error('作业信息不完整');
                return;
            }
            console.log('修改作业:', row);
            this.$router.push({
                path: '/layout/fabu',
                query: {
                    homeworkId: row.homeworkId
                }
            });
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.currentPage = 1;
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
        },
        tableRowClassName({row}) {
            return this.highlightedRows.has(row.homeworkId) ? 'highlighted-row' : '';
        }
    }
};
  </script>
  
  <style lang="less" scoped>
  .list {
  background-color: white;
  width: 1300px; /* 设置课程容器的宽度 */
  min-height: 800px;
  margin: -110px auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.elist {
  padding-left: 80px;
  flex-grow: 1; /* 让 elist 占据剩余空间 */
  position: relative;
  padding-bottom: 80px;
}

.el-button {
  background: rgba(53, 181, 208, 1);
  color: white;

}

/* 新增分页包装器样式 */
.pagination-wrapper {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    background-color: white;
    padding: 10px 0;
}

/deep/ .highlighted-row {
    background-color: #fdf5e6 !important;
}

/deep/ .highlighted-row:hover td {
    background-color: #faebd7 !important;
}
  </style>